<template>
  <div>
    <el-dialog
      class="base-dialog"
      :custom-class="'panna-dialog_medium'"
      :title="dataList.EquipSpareParts"
      align="center"
      destroy-on-close
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" :label="dataList.Number" width="100">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <span style="color: red">*</span>
              <span>{{ dataList.Name }}</span>
            </template>
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" autocomplete="off"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <span style="color: red">*</span>
              <span>{{ dataList.UnitOfMeasurement }}</span>
            </template>
            <template slot-scope="scope">
              <el-input v-model="scope.row.unit" autocomplete="off"></el-input
            ></template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <span style="color: red">*</span>
              <span>{{ dataList.Quantity }}</span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.count"
                autocomplete="off"
                :validate-event="false"
                @blur="handleInputBlur(scope.row)"
              ></el-input
            ></template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="dataList.Operation"
            width="100"
          >
            <template slot-scope="scope">
              <el-link
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)"
                >{{ btn.Delete }}</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button style="float: left" type="primary" @click="addParts">{{
          btn.Add2
        }}</el-button>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit">{{ btn.Save }}</el-button>
        <el-button @click="closeDialog">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { creates } from "../../api/DeviceParts";
export default {
  name: "DevicePartsDialog",
  props: {
    dialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    deviceIdList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      innerDialogFormVisible: false,
      tableData: [],
    };
  },
  computed: {
    dataList() {
      return this.$i18n.t("ModuleDevice.Device");
    },
    btn() {
      return this.$i18n.t("ModuleDevice.buttons");
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {},
    onSubmit() {
      if (
        this.tableData === undefined ||
        this.tableData === null ||
        this.tableData.length === 0
      ) {
        this.$message.error(
          this.$t("ModuleDevice.Message.PleaseAddSpareParts")
        );
        return false;
      }

      for (let o = 0; o < this.tableData.length; o++) {
        if (!this.tableData[o].name) {
          this.$message.error(this.$t("ModuleDevice.Message.NameNotNull"));
          return false;
        }
        if (!this.tableData[o].unit) {
          this.$message.error(
            this.$t("ModuleDevice.Message.SparepartsUnitNotNull")
          );
          return false;
        }
        if (!this.tableData[o].count) {
          this.$message.error(
            this.$t("ModuleDevice.Message.SparepartsQuantityNotNull")
          );
          return false;
        }
      }
      var data = [];
      for (let i = 0; i < this.deviceIdList.length; i++) {
        for (let o = 0; o < this.tableData.length; o++) {
          data.push({
            deviceId: this.deviceIdList[i],
            name: this.tableData[o].name,
            unit: this.tableData[o].unit,
            count: this.tableData[o].count,
          });
        }
      }
      creates(data)
        .then((res) => {
          this.closeDialog();
        })
        .catch((res) => {});
    },
    handleInputBlur(row) {
      // 正则表达式：必须为正整数
      const reg = /^[1-9]\d*$/;
      if (!reg.test(row.count)) {
        this.$message.error(this.$t("ModuleDevice.Message.RegPositiveinteger"));
        row.count = 1; // 重置为默认值
      }
    },
    addParts() {
      this.tableData.push({ name: "", unit: this.dataList.Item, count: 1 });
    },
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    closeDialog() {
      this.$emit("update:dialogFormVisible", false);
      this.innerDialogFormVisible = false;
    },
  },
};
</script>
